<script lang="ts" setup>
import { ref } from "vue";
import { PriceCardItemType } from "../../../utils/ts/price";

const { item } = defineProps<{ item: PriceCardItemType }>();

const buttonStyle = ref({
  color: item.theme,
  border: "1px solid " + item.theme,
  background: "#fff",
});

const cardStyle = ref({});

const removeHover = () => {
  buttonStyle.value = {
    color: item.theme,
    border: "1px solid " + item.theme,
    background: "#fff",
  };
  cardStyle.value = {
    boxShadow: "none",
  };
};
const hover = () => {
  buttonStyle.value = {
    color: "#ffffff",
    border: "1px solid " + item.theme,
    background: item.but,
  };
  cardStyle.value = {
    boxShadow: item.shadow,
  };
};


</script>
<template>
  <div class="flex flex-col card transition hover:-translate-y-6 w-full md:w-3/10" @mouseenter="hover"
    @mouseleave="removeHover">
    <p class="h-25 mb-0 flex items-center text-white pl-5 text-2xl font-bold relative"
      :style="`background: ${item.theme}`">
      {{ item.title }}
      <img :src="item.img" alt="" class="absolute right-0" />
    </p>
    <div class="p-4 transition" :style="cardStyle">
      <div class="h-15 text-lg">
        <p class="mb-0 whitespace-nowrap overflow-hidden text-ellipsis">
          {{ item.intro1 }}
        </p>
        <p class="whitespace-nowrap overflow-hidden text-ellipsis">
          {{ item.intro2 }}
        </p>
      </div>
      <router-link to="/index/compareVersion">
        <button class="flex w-35 h-12 rounded-12 text-xl justify-center items-center mt-4 transition"
          :style="buttonStyle">
          查看详情
        </button>
      </router-link>
    </div>
  </div>
</template>
<style lang="scss" scoped>
.card {
  margin-right: 28px;
  box-shadow: 0 5px 15px rgba(0, 68, 12, 0.1);
  background-color: #fff;
  margin-bottom: 50px;
  border-radius: 8px;
  overflow: hidden;
}
</style>
